<template>
	<view class="module_icon_wrap">
		<!-- 搜索栏 -->
		<view class="search_box">
			<wd-search v-model="searchKeyW"  @blur="searchBlur" @search="searchSearch" @clear="searchClear" @change="searchChange" :hide-cancel="true" light />
			<view class="count_box">
				<text class="count_text">{{ countTextComp }}</text>
			</view>
		</view>
		
		<!-- 名片列表 -->
		<view class="card_list_box">
			<view class="card_item_box" @click="showActions(bcl)" v-for="(bcl,indexB) in businessCardList" :key="indexB">
				<view class="left_box">
					<view class="avatar_box">
						<wd-img
						 :width="56"
						 :height="56"
						 round
						 :src="bcl.avatar"
						>
						<template #loading>
						     <view class="loading-wrap">
						       <wd-loading/>
						     </view>
						   </template>
						</wd-img>
					</view>
					<view class="info_box">
						<view class="top_box">
							<text class="user_name">{{ bcl.userName }}</text>
							<text class="user_position">{{ bcl.userPosition }}</text>
						</view>
						<view class="bottom_box">
							<text class="company_name">{{ bcl.companyName }}</text>
						</view>
					</view>
				</view>
				<view class="right_box">
					<!-- 打电话按钮 -->
					<image class="call_img" @click.stop="callClick(bcl.userPhone)" src="./images/call.svg" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 动作面板 -->
		<wd-toast />
		<!-- <wd-button @click="showActions">弹出菜单</wd-button> -->
		<wd-action-sheet v-model="sheetActionShow" :actions="sheetActions" @close="closeActions" @select="actionSelect" cancel-text="取消" />
	</view>
</template>

<script>
	import {
		defineComponent,
		ref,
		computed,
		onMounted
	} from 'vue'
	import './index.scss'
	export default defineComponent({
		name: 'BusinessCardHolder',
	})
</script>
<script setup>
	import { useToast } from '@/uni_modules/wot-design-uni'
	import { useUserStore } from '@/stores/user.js'
	import { selectLocationByAddressApi } from '@/api/gaode.js'
	import { selectMyCollectListApi,secureCollectCardApi } from '@/api/card.js'
	
	const userStore = useUserStore()

	
	const sheetActionShow = ref(false)
	const sheetActions = ref([
	  {
	    name: '查看名片',
		color:"blue",
	  },
	  {
	    name: '移出名片夹',
		color:"red",
	  }
	])
	
	// 当前点击操作的名片
	const currentClickActionCardInfo = ref({})
	
	function showActions(bcl) {
	  currentClickActionCardInfo.value = bcl
	  sheetActionShow.value = true
	}
	
	function closeActions() {
	  sheetActionShow.value = false
	}
	
	const toast = useToast()
	
	function actionSelect({ item, index }) {
		console.log(item);
		switch (item.name){
			case '查看名片':
			    console.log("查看名片",currentClickActionCardInfo.value)
				uni.navigateTo({
					url:"/pages/businessCard/businessCard" +`?beDisplayedUserId=${currentClickActionCardInfo.value.id}&beDisplayedUserName=${currentClickActionCardInfo.value.userName}`,
				})
				break;
				
		    case '移出名片夹':
			    // console.log("移出名片夹",currentClickActionCardInfo.value)
					secureCollectCardFunc(currentClickActionCardInfo.value.collectId)
		    	break;
			default:
				break;
		}
	}
	
	
	// 是否是搜索模式的标识
	const isSearchMode = ref(false)
	
	// 计数文本计算属性
	const countTextComp = computed(()=>{
		let text = ''
		if(isSearchMode.value){
			text = `共有 ${businessCardList.value.length} 张相关名片`
		}else{
			text = `共收藏了 ${businessCardList.value.length} 张名片`
		}
		return text
	})
	
	// 打电话点击事件
	const callClick= (phone)=>{
		uni.makePhoneCall({
			phoneNumber:phone,
			success: () => {
				console.log('打电话成功');
			},
			fail: () => {
				console.log('打电话失败');
			}
		})
	}
	
	// 原名片列表
	const businessCardListY = ref([

	])
	
	// 名片列表
	const businessCardList = ref([
	])
	
	
	// 搜索关键字
	const searchKeyW = ref("")
	
	
	// 搜索框blur事件
	const searchBlur = (e)=>{
		console.log('searchBlur',e);
	}
	
	// 搜索框search事件
	const searchSearch= (e)=>{
		console.log('searchSearch',e);
	}
	
	// 搜索框clear事件
	const searchClear= (e)=>{
		console.log('searchClear',e);
	}
	
	// 搜索框cancel事件
	const searchCancel= (e)=>{
		console.log('searchCancel',e);
	}
	
	// 搜索框change事件
	const searchChange = (e)=>{
		console.log('searchChange',e);
		if(e.value != ""){
			businessCardList.value = businessCardListY.value.filter((item)=>{return item.userName.indexOf(e.value) != -1})
		}else{
			businessCardList.value = businessCardListY.value
		}
	}
	
	
	
	
	// 取消收藏的函数
	const secureCollectCardFunc = async (collectId)=>{
		
		
		await secureCollectCardApi(collectId).then((res)=>{
			if(res.data.result == "success"){
				uni.showToast({
					title:"移出名片夹成功",
					icon:"none",
					duration:1000,
					mask:true
				})
				selectMyCollectListFunc()
			}else if(res.data.result == "error"){
				uni.showToast({
					title:"移出名片夹失败",
					icon:"none",
					duration:1000,
					mask:true
				})
				selectMyCollectListFunc()
			}
		}).catch((err)=>{
			uni.showToast({
				title:"移出名片夹失败",
				icon:"none",
				duration:1000,
				mask:true
			})
		})
	} 
	
	
	// 查询收藏列表的函数
	const selectMyCollectListFunc = async()=>{
		await selectMyCollectListApi(userStore.userInfo.userId).then((res)=>{
			if(res.data.result == "success"){
				// 判断数据为空
				if(res.data.data == null || res.data.data == [] ||  res.data.data == undefined){
					businessCardList.value = []
					businessCardListY.value = []
				}else{
					let nData = res.data.data.map((item)=>{
						return {
							id:item.user.userId,
							collectId:item.collectId,
							avatar:item.user.cardUser.cardUserProfilePicture,
							userName:item.user.cardUser.cardUserName,
							userPhone:item.user.cardUser.cardUserPhone,
							userPosition:item.user.cardUser.cardUserPosition,
							companyName:item.user.cardUser.companyName
						}
					})
					businessCardList.value = nData
					businessCardListY.value = nData
				}
			}else if(res.data.result == "error"){
				
			}
		})
	} 
	
	
	onMounted(()=>{
		selectMyCollectListFunc()

	})
	
</script>

<style lang="scss" scoped>

:deep(.loading-wrap){
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>